<template>
  <div class="plus-head">
    <div class="plus-nav" @click="gocenter">
      <span class="iconfont icon-zuojiankuohao"></span>
      <p>开通橙PLUS卡</p>
    </div>
    <div class="plus-pic" align="center">
      <img src="../../assets/img/openPlus1.png" alt />
      <div class="plus-pic-1">
        <img src="../../assets/img/openPlus2.png" alt />
        <p>储值卡</p>
        <p>￥999</p>
        <p>
          开卡999
          <span>赠100</span>
        </p>
      </div>
      <div class="plus-text">
        <span class="span1">活动</span>
        <span>赠送 VIP+会员</span>

        <span>年</span>
        <span>
          立省
          <span style="color:#ff6743">99</span>元
        </span>
      </div>
      <div class="plus-city">
        <i @click="showPopup" class="city-span">{{selectArea}} ></i>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <van-area title="城市列表" :area-list="areaList" :columns-num="1" @confirm="event" />
        </van-popup>
      </div>
      <div class="plus-pay">
        <p>支付方式</p>
        <p>
          <img src="../../assets/img/wx.png" alt />
          <span>微信支付</span>
          <input class="input1" type="radio" name="radio" value="1" />
        </p>
        <p>
          <img src="../../assets/img/zfb.png" alt />
          <span>支付宝网页支付</span>
          <input class="input2" type="radio" name="radio" value="2" />
        </p>
      </div>
      <div class="plus-footer">
        <p>
          购买即视为同意
          <span>《聚橙网橙PLUS卡服务协议》</span>
        </p>
        <p>
          <span>应付：</span>
          <span>￥999</span>
          <span>赠 100元</span>
          <span class="span">立即开卡</span>
        </p>
      </div>
    </div>

    <!-- <div class="click-city"  v-show="play"> {{ content }}</div> -->
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import "../../assets/iconfont/iconfont.css";
import Vue from "vue";
import { Popup } from "vant";
import { Area } from "vant";

Vue.use(Area);
Vue.use(Popup);
export default {
  data() {
    return {
      // content:'1111',
      // play:true
      show: false,
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
          130000: "河北省",
          140000: "山西省",
          150000: "内蒙古自治区",
          210000: "辽宁省",
          220000: "吉林省",
          230000: "黑龙江省",
          310000: "上海市",
          320000: "江苏省",
          330000: "浙江省",
          340000: "安徽省",
          350000: "福建省",
          360000: "江西省",
          370000: "山东省",
          410000: "河南省",
          420000: "湖北省",
          430000: "湖南省",
          440000: "广东省",
          450000: "广西",
          460000: "海南省",
          500000: "重庆市",
          510000: "四川省",
          520000: "贵州省",
          530000: "云南省",
          540000: "西藏自治区",
          610000: "陕西省",
          620000: "甘肃省",
          630000: "青海省",
          640000: "宁夏",
          650000: "新疆",
          710000: "台湾省",
          810000: "香港特别行政区",
          820000: "澳门特别行政区",
          900000: "海外",
        },
      },
      selectArea: "请选择城市",
    };
  },
  computed: {
    ...mapState("show", ["showList"]),
  },
  methods: {
    showPopup() {
      this.show = true;
    },

    event(items) {
      this.selectArea = items[0]["name"];
      this.show = false;
    },
    gocenter(){
      this.$router.push({path:'/center'})
    }
  },
};
</script>

<style lang='scss' scoped>

.plus-nav {
  z-index: 10;
  position: fixed;
  top: 0;
  height: 1.3rem;
  background: white;
  width: 100%;
  font-size: 0.2rem;
  height: 0.76rem;
  span {
    margin-left: 0.3rem;
    line-height: 0.76rem;
    font-size: 0.4rem;
  }
  p {
    text-align: center;
    position: relative;
    top: -0.7rem;
    font-size: 0.35rem;
    line-height: 0.76rem;

  }
}
.plus-pic {
  height: 3.4rem;
  margin-top: 0.9rem;
  margin-left:0rem;
  .plus-pic-1 {
    height: 0.65rem;
    width: 3rem;
    position: relative;
    top: -3.2rem;
    left: -1.5rem;
    img {
      height: 100%;
      width: 100%;
    }
    p:nth-of-type(1) {
      width: 1rem;
      background: rgb(38, 38, 37);
      text-align: center;
      color: #c6bc9b;
      height: 0.4rem;
      line-height: 0.4rem;
      position: absolute;
      top: 0.14rem;
      left: 3.3rem;
    }
    p:nth-of-type(2) {
      font-size: 0.5rem;
      color: #ebdeb5;
      position: absolute;
      top: 2.3rem;
    }
    p:nth-of-type(3) {
      font-size: 0.3rem;
      position: absolute;
      top: 2.5rem;
      right: -3rem;
      color: #ada17f;
      span {
        color: #ebdeb5;
      }
    }
  }
  img {
    height: 100%;
  }
  .plus-text {
    height: 0.8rem;
    width: 6.3rem;
    background: #fff0de;
    margin-left: -0.3rem;
    position: relative;
    top: -0.3rem;
    line-height: 0.8rem;
    color: #896039;
    font-size: 0.25rem;
    .span1 {
      display: inline-block;
      width: 0.6rem;
      background: #ff843a;
      line-height: 0.4rem;
      color: white;
      border-radius: 10%;
      position: relative;
      left: -0.6rem;
    }
  }
}
.plus-city {
  margin-top: 0.5rem;
  color: black;
  border-top: #f5f5f5 0.2rem solid;
  border-bottom: #f5f5f5 0.2rem solid;
  line-height: 1rem;
  text-align: left;
  span:nth-of-type(1) {
    margin-left: 0.5rem;
    font-size: 0.33rem;
  }
  .city-span {
    font-size: 0.2rem;
    margin-left: 5.2rem;
    color: #ff6743;
    font-size: 0.27rem;
  }
}
.plus-pay {
  font-size: 0.32rem;
  p:nth-of-type(1) {
    height: 1.1rem;
    border-bottom: 0.04rem solid #f5f5f5;
    line-height: 1.1rem;
    text-align: left;
    margin-left: 0.5rem;
  }
  p:nth-of-type(2),
  p:nth-of-type(3) {
    height: 1.3rem;
    border-bottom: 0.04rem solid #f5f5f5;
    line-height: 1.3rem;
    text-align: left;
    margin-left: 0.5rem;
    // line-height: rem ;
    img {
      height: 0.6rem;
      margin-top: 0.2rem;
    }
    span {
      position: relative;
      top: -0.2rem;
      display: inline-block;
      margin-left: 0.2rem;
    }
    .input1 {
      position: relative;
      right: -3.85rem;
    }
    .input2 {
      position: relative;
      right: -2.9rem;
    }
  }
}
.plus-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  p:nth-of-type(1) {
    height: 0.9rem;
    border-bottom: 0.04rem solid #f5f5f5;
    border-top: 0.04rem solid #f5f5f5;
    line-height: 0.9rem;
    margin-left: -1.8rem;
    color: rgb(153, 153, 153);
    font-size: 0.25rem;
    span {
      color: #ff6743;
    }
  }
  p:nth-of-type(2) {
    height: 1rem;
    margin-left: 0.2rem;
    line-height: 1rem;
    span:nth-of-type(1) {
      font-size: 0.35rem;
      font-weight: 600;
    }
    span:nth-of-type(2) {
      color: #ff6743;
    }
    span:nth-of-type(3) {
      color: rgb(153, 153, 153);
      margin-right: 0.3rem;
    }
    span:nth-of-type(4) {
      display: inline-block;
      width: 4.2rem;
      font-size: 0.35rem;
      color: white;
      background: #ff6743;
      line-height: 1rem;
      height: 2rem;
    }
  }
}
.click-city {
  background: white;
  height: 6rem;
  width: 100%;
  position: fixed;
  bottom: 0rem;
  z-index: 10;
}
</style>